<template>
  <div class='container'>
    <el-dialog width="50%" :visible='showDialog' title="预览文章" @close="close">
        <div class="title">{{articleData.title}}</div>
        <div class='message'>
          <span class="message-item">{{articleData.createTime | parseTime}}</span>
          <span class="message-item">{{ getCreator(articleData.creatorID) }}</span>
          <span class="el-icon-view message-item">{{ articleData.visits }}</span>
        </div>
        <div class="main" v-html="articleData.articleBody">
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/base/users'
import { detail } from '@/api/hmmm/articles'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      articleData: {}, // 问题详情
      users: [] // 用户列表
    }
  },
  created () {
    this.getUsers()
  },
  methods: {
    async getArticleDetail (id) {
      const { data: res } = await detail({ id })
      this.articleData = res
    },
    async getUsers () {
      const { data: users } = await simple()
      this.users = users
    },
    getCreator (id) {
      const obj = this.users.find(item => item.id === id)
      if (obj && obj.username) return obj.username
      return '未知'
    },
    async close () {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped lang='less'>
  .title {
    font-size: 20px;
    font-weight: 700;
  }
  .message {
    margin-top:20px;
    .message-item:nth-child(n+2) {
      margin-left: 10px;
    }
    .el-icon-view {
      &::before {
        margin-right: 5px;
        color: rgb(14, 112, 145);
      }
    }
  }
  .main {
    background-color: #f5f5f5;
    border-top: 1px dashed #999;
    padding: 10px;
    margin-top: 20px;
    ::v-deep img {
      max-width: 100%;
    }
  }
</style>
